<template>
  <view class="disFlxAC pl-15 py-10 br-12 bgf mx-15 mb-8 itemBox" @click="changeChecked">
    <view v-if="!showDel" class="pr-15 shrink0 check-box">
      <template v-if="type === 'checkbox'">
        <view v-if="isChecked" class="ali-icon icon-yixuan" style="color: #2878ff"></view>
        <view v-else class="ali-icon icon-fangxingweixuanzhong"></view>
      </template>
      <template v-else>
        <view v-if="isChecked" class="ali-icon" style="color: #2878ff">&#xe693;</view>
        <view v-else class="ali-icon">&#xe690;</view>
      </template>
    </view>
    <view style="flex: 1" class="pr-15">
      <view class="disFlxAC">
        <view class="fz-16 ov-1">{{ userInfo.userName }}</view>
        <view v-if="userInfo.memberLevelName" class="fz-12 professionalTag ml-8 shrink0">
          {{ userInfo.memberLevelName }}
        </view>
        <text
          v-if="userInfo.initRole === InitRoleEnum.PRINCIPALS"
          class="ali-icon fz-18 ml-8 shrink0"
          style="color: #97bfff"
        >
          &#xe63c;
        </text>
      </view>
      <view class="disFlxAC pt-8" v-if="userInfo.companyName">
        <image
          v-if="userInfo.applyType === ApplyTypeEnum.UNIT"
          class="member-icon fz-16 shrink0"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/member-icon-1.png"
        />
        <view class="fz-14 ov-1">{{ userInfo.companyName }}</view>
        <view class="fz-14 shrink0 position ml-8" v-if="userInfo.companyPosition">
          {{ userInfo.companyPosition }}
        </view>
      </view>
    </view>
    <view v-if="showDel" class="shrink0 disFlxAC pr-5" @click.stop>
      <view v-if="showDel" class="iconImgBox disFlxCC" @click.stop="delUser">
        <image src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/del-icon.png" style="width: 32rpx; height: 32rpx" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type PropType } from 'vue';
  import type { MsgUserData } from '@/api/admin/types';
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import { InitRoleEnum } from '@/enums/admin';
  import { propTypes } from '@/utils/propTypes';
  import type { PublicSelectUserList } from '@/router/types/modules';

  const props = defineProps({
    userInfo: {
      type: Object as PropType<MsgUserData>,
      required: true,
    },
    showDel: propTypes.bool.def(false),
    isChecked: propTypes.bool.def(false),
    type: String as PropType<PublicSelectUserList['type']>,
  });

  const emits = defineEmits(['changeChecked', 'onDel']);
  function changeChecked() {
    emits('changeChecked', props.userInfo.id);
  }

  const delUser = () => {
    emits('onDel', props.userInfo.id);
  };
</script>

<style lang="scss" scoped>
  .itemBox {
    min-height: 96rpx;
    box-sizing: border-box;
    .check-box {
      width: 48rpx;
      .ali-icon {
        font-size: 40rpx;
        color: #999996;
      }
    }
    .shrink0 {
      flex-shrink: 0;
    }
    .professionalTag {
      background-color: #f8edd9;
      padding: 0 10rpx;
      border-radius: 4rpx;
    }
    .position {
      color: #aaabab;
    }
  }

  .member-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }

  .iconImgBox {
    width: 60rpx;
    height: 60rpx;
  }
</style>
